import { Card, Avatar } from "antd";
import {
  DesktopOutlined,
  FileMarkdownOutlined,
  PieChartOutlined,
  TeamOutlined,
  UserOutlined,
  BarChartOutlined,
  RadarChartOutlined,
  HourglassOutlined,
  RedEnvelopeOutlined,
  BoxPlotOutlined,
  AuditOutlined,
  BranchesOutlined
} from "@ant-design/icons";
import styled from "./index.module.scss";
import indexImage from "/src/assets/welcome.jpg"
import { useEffect } from "react";
import { useNavigate } from 'react-router-dom';
import { getCookie } from "@/utils/cookies";

const cardTitleItemsStyle: React.CSSProperties = {
  width: 260,
  marginTop: 16,
};

const cardTitleItems = [
  {
    avatar: (
      <Avatar
        style={{ backgroundColor: "#41486c" }}
        icon={<PieChartOutlined style={{ color: "#ffffff" }} />}
      />
    ),
    title: "监测管理",
    description: "有关系统的参数信息",
    hoverable: true,
  },
  {
    avatar: (
      <Avatar
        style={{ backgroundColor: "#41486c" }}
        icon={<DesktopOutlined style={{ color: "#ffffff" }} />}
      />
    ),
    title: "调度管理",
    description: "有关单车的调度",
    hoverable: true,
  },
  {
    avatar: (
      <Avatar
        style={{ backgroundColor: "#41486c" }}
        icon={<RadarChartOutlined style={{ color: "#ffffff" }} />}
      />
    ),
    title: "系统管理",
    description: "有关系统实体表的管理",
    hoverable: true,
  },
  {
    avatar: (
      <Avatar
        style={{ backgroundColor: "#41486c" }}
        icon={<UserOutlined style={{ color: "#ffffff" }} />}
      />
    ),
    title: "权限管理",
    description: "有关管理权限配置",
    hoverable: true,
  },
];

const cardTitleItems2 = [
  {
    avatar: (
      <Avatar
        style={{ backgroundColor: "#0000FF" }}
        icon={<TeamOutlined style={{ color: "#ffffff" }} />}
      />
    ),
    title: "用户管理",
    description: "有关对用户信息的管理",
    hoverable: true,
  },
  {
    avatar: (
      <Avatar
        style={{ backgroundColor: "#0000FF" }}
        icon={<HourglassOutlined style={{ color: "#ffffff" }} />}
      />
    ),
    title: "请求管理",
    description: "有关各种请求的统计处理",
    hoverable: true,
  },
  {
    avatar: (
      <Avatar
        style={{ backgroundColor: "#0000FF" }}
        icon={<RedEnvelopeOutlined style={{ color: "#ffffff" }} />}
      />
    ),
    title: "奖励管理",
    description: "有关奖券的管理",
    hoverable: true,
  },
  {
    avatar: (
      <Avatar
        style={{ backgroundColor: "#0000FF" }}
        icon={<BoxPlotOutlined style={{ color: "#ffffff" }} />}
      />
    ),
    title: "单车管理",
    description: "有关单车的管理",
    hoverable: true,
  },
];

const cardTitleItems3 = [
  {
    avatar: (
      <Avatar
        style={{ backgroundColor: "#87CEEB" }}
        icon={<BarChartOutlined style={{ color: "#ffffff" }} />}
      />
    ),
    title: "统计管理",
    description: "有关信息的统计",
    hoverable: true,
  },
  {
    avatar: (
      <Avatar
        style={{ backgroundColor: "#87CEEB" }}
        icon={<AuditOutlined style={{ color: "#ffffff" }} />}
      />
    ),
    title: "操作日志",
    description: "记录数据表的操作日志",
    hoverable: true,
  },
  {
    avatar: (
      <Avatar
        style={{ backgroundColor: "#87CEEB" }}
        icon={<BranchesOutlined style={{ color: "#ffffff" }} />}
      />
    ),
    title: "用户反馈",
    description: "有关用户反馈的处理",
    hoverable: true,
  },
  {
    avatar: (
      <Avatar
        style={{ backgroundColor: "#87CEEB" }}
        icon={<FileMarkdownOutlined style={{ color: "#ffffff" }} />}
      />
    ),
    title: "模型管理",
    description: "有关模型的应用",
    hoverable: true,
  },
];

export const Home = () => {

  const navigateTo = useNavigate();
  useEffect(() => {
    // 判断是否有token，检测用户是否已登录，如果未登录，给出提示，并将其跳转到登录页
    if (getCookie('token') == null) {
      navigateTo("/login");
      return;
    }
  }, []);

  const { homeBox, homeBoxAvatar } = styled;
  return (
    <div className={homeBox}>
      <Card
        style={{ marginBottom: "10px" }}
        bodyStyle={{
          display: "flex",
          justifyContent: "space-between",
        }}
        className={homeBoxAvatar}
      >
        {cardTitleItems.map((item, index) => {
          return (
            <Card
              key={index}
              hoverable={item.hoverable}
              style={cardTitleItemsStyle}
            >
              <Card.Meta
                avatar={item.avatar}
                title={item.title}
                description={item.description}
              />
            </Card>
          );
        })}
      </Card>
      <Card
        style={{ marginBottom: "10px" }}
        bodyStyle={{
          display: "flex",
          justifyContent: "space-between",
        }}
        className={homeBoxAvatar}
      >
        {cardTitleItems2.map((item, index) => {
          return (
            <Card
              key={index}
              hoverable={item.hoverable}
              style={cardTitleItemsStyle}
            >
              <Card.Meta
                avatar={item.avatar}
                title={item.title}
                description={item.description}
              />
            </Card>
          );
        })}
      </Card>
      <Card
        style={{ marginBottom: "10px" }}
        bodyStyle={{
          display: "flex",
          justifyContent: "space-between",
        }}
        className={homeBoxAvatar}
      >
        {cardTitleItems3.map((item, index) => {
          return (
            <Card
              key={index}
              hoverable={item.hoverable}
              style={cardTitleItemsStyle}
            >
              <Card.Meta
                avatar={item.avatar}
                title={item.title}
                description={item.description}
              />
            </Card>
          );
        })}
      </Card>
      <div
        style={{
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <img src={indexImage} style={{ maxWidth: '100%', height: '250px' }} />
      </div>
    </div>
  );
};

export default Home;
